<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Student Amount</title>
			<script type="text/javascript" src="../js/d3.js"></script>
			<script type="text/javascript" src="../js/dimple.v2.1.0.js"></script>
			<script type="text/javascript" src="../util/Navigator.js"></script>
			<script src="../js/pace/pace.js"></script>
			<link href="../js/pace/themes/loadingBar.css" rel="stylesheet" />
			<link href="../css/navigator.css" rel="stylesheet"/>
			
		<style type="text/css">
	       body {
            text-align: center;
            font: 14px sans-serif;
            margin: 0;
	        }
	        svg {
	            font-size: 20px;
	        }
	        .header {
	            font: 15px sans-serif;
	        }
	        
	    </style>
	</head>
	<body>
		<div id="header" style="position: fixed;width: 100%;background-color: rgb(255,255,255);"></div>
		<div id="navigator" style="position: fixed;width: 100%;top: 42px;background-color: rgb(255,255,255);"></div>
		<script type="text/javascript">
			var header = d3.select("#header").attr("class","header");
			header.html("<a href='../index.html'><img src='../images/home_icon.png'></a> รายงานจำนวนนักศึกษา มหาวิทยาลัยราชภัฏ รำไพพรรณี  ");
			var navi1,navi2;
			d3.json("../STD002Controller",function(error,data){
				
				var root = {"name":"จำนวนนักศึกษา มหาวิทยาลัยราชภัฏ รำไพพรรณี",
						"children":[{"name":"จำนวนนักศึกษา แยกรายคณะ"}]
				};
				navigator("navigator", root);		
				var navi = d3.select("#navigator").selectAll("g.node").selectAll("circle");
				navi.forEach(function(d,i){
					if(i==0){
						navi1 = d[0];
					}else{
						navi2 = d[0];
					}
				});
				navi1.style.fill = "rgb(176,196,222)";
				
				d3.select("body").append("div").attr("id","barGraph1");
				var svg = dimple.newSvg("#barGraph1", 590, 550);
				var myChart = new dimple.chart(svg, data);
				myChart.setBounds(60, 150, 510, 330)
				var x = myChart.addCategoryAxis("x", ["acadYear","studyperiodName"]);
				var y = myChart.addMeasureAxis("y", "amount");
				//var mySeries = myChart.addSeries(null, dimple.plot.bar);
				
				var chart = myChart.addSeries("studyperiodName", dimple.plot.bar);
				
				//chart.addOrderRule("studyPeriod");
				chart.addEventHandler("click", onClick);
				
				chart.getTooltipText = function(e) {
                    return [
                        "ปีการศึกษา: " + e.x,
                        "จำนวน: " + e.y,
                        "สถานะ: "+ e.aggField[0]
                    ];
                };
				
				x.title = "ปีการศึกษา";
				y.title = "จำนวนนักศึกษา";
				
				var myLegend = myChart.addLegend(60, 100, 350, 20, "right");
				
				myChart.draw(600);
				
				//var myArray = myLegend.shapes[0];
				//myArray[0].innerHTML = "";
				//x.shapes.selectAll("text").attr("transform", "rotate(45)");
				
				//myChart.legends = [];
				
				//myChart.draw();
				
				function onClick(e){
					var acadYear;
					firstDrilldown(e.xValue);
				};
			});//end d3.json
			
			function firstDrilldown(acadYear){
				d3.json("../STD002Controller?acadYear="+acadYear,function(error,data){
					removeDiv("barGraph2");
					navi2.style.fill = "rgb(176,196,222)";
					var header = d3.select("body").append("div").attr("id","barGraph2");
					header.append("p").attr("class","header").text("รายงานจำนวนนักศึกษา แยกตามคณะ ปีการศึกษา "+acadYear);
					var svg = dimple.newSvg("#barGraph2", 650, 650);
					var myChart = new dimple.chart(svg, data);
					myChart.setBounds(60, 100, 510, 330)
					var x = myChart.addCategoryAxis("x", ["facultyName","studyPeriodName"]);
					var y = myChart.addMeasureAxis("y", "amount");
					//var mySeries = myChart.addSeries(null, dimple.plot.bar);
					
					var chart = myChart.addSeries("studyPeriodName", dimple.plot.bar);
					
					//chart.addOrderRule("studyperiodName");
					//chart.addEventHandler("click", onClick);
					
					chart.getTooltipText = function(e) {
	                    return [
	                        "ปีการศึกษา: " + e.x,
	                        "จำนวน: " + e.y,
	                        "สถานะ: "+ e.aggField[0]
	                    ];
	                };
					
					x.title = "ปีการศึกษา";
					y.title = "จำนวนนักศึกษา";
					
					var myLegend = myChart.addLegend(60, 60, 350, 20, "right");
					myChart.draw(600);
					x.shapes.selectAll("text").attr("transform", "rotate(45)");
					goToAnchor("barGraph2");
				});//end d3.json
			}
			
			function removeDiv(divName){
	        	if(document.getElementById(divName)!=null){
	        		document.getElementById(divName).remove();
	        	}
	        }
			
			function goToAnchor(name) {
	            document.getElementById(name).scrollIntoView(true);
	        }
		</script>
	</body>
</html>